<template>
  <span :class="['custom-pipe-count', textColor]">{{ props.value }}</span>
</template>

<script setup lang="ts">
import { computed } from 'vue-demi';

const props = defineProps({
  value: {
    type: [Number, String],
    default: ''
  }
});

const textColor = computed(() => {
  return Number(props.value) < 0 ? 'output' : 'input';
});
</script>

<style lang="scss" scoped>
.custom-pipe-count {
  &.input {
    color: #67c23a;
  }
  &.output {
    color: #f56c6c;
  }
}
</style>
